/** @license
 * MIT License
 *
 * Copyright (c) 2018
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
import { covertHex3ToHex6, createOption } from '../utils'

export default createOption({
  props: [
    'id',
    'min',
    'max',
    'step',
    'disabled',
    'value',
    'backgroundcolor',
    'activecolor',
    'blockColor',
    'showValue',
    'showsteps',
    'showtips'
    // 命名规则不一致因为 internalComponents 中有些使用驼峰，有些是短线，和其保持一致
  ],
  computed: {
    color () {
      return covertHex3ToHex6(this.backgroundcolor)
    },
    selectedColor () {
      return covertHex3ToHex6(this.activecolor)
    },
    sliderBlockColor () {
      return covertHex3ToHex6(this.blockColor)
    },
    valueWidth () {
      if (!this.showValue) {
        return '0px'
      }
      let baseWidth = 28
      const maxLen = Math.max(this.min.toString()?.length, this.max.toString()?.length, this.step.toString()?.length)
      if (maxLen > 3) {
        baseWidth = baseWidth + (maxLen - 3) * 15
      }
      return baseWidth + 'vp'
    }
  },
  data () {
    return {
      currentValue: this.value || 0
    }
  },
  onChange (e) {
    if (e.isEnd === 'true') {
      this.$trigger('change', { progress: e.progress, isEnd: e.isEnd, value: e.value })
    }
    this.$trigger('changing', { progress: e.progress, isEnd: e.isEnd, value: e.value })
    this.currentValue = e.value
  }
})
